<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard title="合同智审">
            <div class="tabOne">
              <router-link to="/bmViews-contract/contractTmp">
                <div class="tablist">
                  <img src="~@/assets/images/cai_icon_nor.png" class="imgnor" />
                  <img src="~@/assets/images/cai_icon_sel.png" class="imgsel" />
                  <el-button round>合同模板</el-button>
                </div>
              </router-link>
              <router-link to="/bmViews-contract/contractAudit">
                <!-- <div class="tablist isActive">
                  <img src="~@/assets/images/fa_icon_nor.png" class="imgnor" />
                  <img src="~@/assets/images/fa_icon_sel.png" class="imgsel" />
                  <el-button round>合同智审</el-button>
                </div> -->
              </router-link>
              <div class="tablist">
                <img src="~@/assets/images/shui_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/shui_icon_sel.png" class="imgsel" />
                <el-button round>合同咨询</el-button>
              </div>
            </div>
            <!-- 审核状态切换 -->
            <div class="auditBox">
              <!-- 1审核上传合同 -->
              <div class="uploadBox" v-if="auditState == 1">
                <img src="~@/assets/images/htzs_img.png" alt="" />
                <p>
                  新一代合同智能审批流程，在线修订留痕、OCR<br />文本对比、风险语义提取、智能评审等功能
                </p>
                <p>开箱即用，跳出效率低谷。</p>
                <el-upload
                  class="upload-demo"
                  action="#"
                  multiple
                  :limit="1"
                  :file-list="fileList"
                >
                  <el-button round>上传合同文件</el-button>
                </el-upload>
                <span>仅支持jpg、png、pdf、doc、docx格式的简体中文文件</span>
              </div>
              <!-- 2审核中 -->
              <div class="inReview" v-else-if="auditState == 2">
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="25"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>正式工劳动合同.pdf</p>
                  <span>文件审核中，约10分钟完成...</span>
                </div>
              </div>
              <!-- 3审核完成 -->
              <div class="reviewOk" v-else>
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="100"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>正式工劳动合同.pdf</p>
                  <span>审核完成</span>
                  <el-button round>再审一份</el-button>
                </div>
              </div>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <div class="auditResult" v-if="auditState === 3">
            <AuditResult></AuditResult>
          </div>
          <div class="featuredContent" v-else>
            <FeaturedContent></FeaturedContent>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import AuditResult from "./auditResult.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import NewCard from "@/wss/components/newCard.vue";
import { getContractTypeListApi } from "../../../api/contract/index";
export default {
  name: "ContractAudit",
  components: { NewCard, FeaturedContent, AuditResult },
  data() {
    return {
      auditState: 1, //1审核上传合同界面 2审核中界面 3审核完成界面

      fileList: [], //上传的合同文件
    };
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
  padding: 0 30px;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}
/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #39486f;
  border-color: #39486f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 智审状态 ************ */
/* 1上传合同 */
.auditBox {
  margin: 50px 0;
}
.uploadBox {
  width: 100%;
  margin: 0 auto;
}
.uploadBox img {
  display: block;
  width: 170px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.uploadBox p {
  font-size: 14px;
  line-height: 28px;
  color: #333;
  text-align: center;
  margin: 0;
}
::v-deep .uploadBox .el-upload {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}
.uploadBox .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}
.uploadBox > span {
  display: block;
  color: #bababa;
  font-size: 12px;
  text-align: center;
  margin-top: 30px;
}

/* 2审核中 */
.progressBar {
  text-align: center;
}
::v-deep .progressBar .el-progress .el-progress__text {
  color: #f87a23;
}
.progressBar p {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 15px;
}
.progressBar span {
  font-size: 12px;
  color: #bababa;
}
/* 审核完成 */
.progressBar .el-button {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}


</style>